<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Blog详情</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/styles/default.min.css">
</head>
<head th:replace="~{common/import :: tophead}"></head>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/highlight.min.js"></script>
<script th:inline="javascript">
    hljs.initHighlightingOnLoad();
</script>

<body>
<div th:replace="~{common/topBar :: nav}"></div>
<div class="container-fluid main" id="contentMain">
    <div class="row">
        <!--左边主要内容-->
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <!--正文-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4 class="question-title">
                    <img th:src="@{/images/book.svg}" class="question-title-left-icon hidden-md hidden-sm hidden-xs">
                    <img th:src="@{/images/book.svg}" class="nav-title-icon hidden-lg">
                    <span th:text="${blog.title}"></span>
                </h4>
                <span class="text-desc">
                作者：<span th:text="${blog.user.name}"></span> &nbsp;|
                发布时间：<span th:text="${#dates.format(blog.creatTime,'yyyy-MM-dd HH:mm')}"></span> &nbsp;|
                阅读数：<span th:text="${blog.view_count}"></span> &nbsp;|&nbsp;
                    <!--编辑-->
                    <!--判断是否登录以及是否发布人才显示编辑-->
                <a th:href="@{'/publish/'+${blog.id}}" class="community-menu"
                   th:if="${session.user != null && session.user.id == blog.user_id}">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true">&thinsp;编辑</span>
                </a>
                </span>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--内容-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="question-view">
                    <div th:utext="${blog.content}"></div>
                </div>
                <script type="text/javascript">
                    $(function() {
                        editormd.markdownToHTML("question-view", {});
                    });
                </script>
                <!--标签-->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="hot-tag-list">
                    <span class="label label-primary tag-style" th:each="tag : ${blog.tags.split(',')}">
                        <a th:href="@{/(tag=${tag})}">
                        <span class="glyphicon glyphicon-tags" style="color: white"></span>
                        <span th:text="${tag}" style="color: white"></span>
                    </a>
                    </span>
                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            </div>

            <!--回复-->


            <!--回复输入框-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>
                    <img th:src="@{/images/check-circle.svg}" class="question-title-left-icon hidden-md hidden-sm hidden-xs">
                    <img th:src="@{/images/check-circle.svg}" class="nav-title-icon hidden-lg">
                    提交评论
                </h4>
                <br>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-hr" id="comment_section">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded user_avatar"
                                     th:src="${session.user != null ? session.user.avatar_url : '/images/default-avatar.png'}">
                            </a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <span th:text="${session.user != null ? session.user.name : '匿名用户'}" style="color: #999"></span>
                            </h5>
                        </div>
                    </div>
                    <input type="hidden" id="question_id" th:value="${blog.id}">
                    <textarea class="form-control comment" rows="6" id="comment_content"></textarea>
                    <button type="button" class="btn btn-success comment-btn" onclick="post()">回复</button>
                </div>
            </div>
        </div>

        <!--右边信息块-->
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4 class="question-title">
                    <img th:src="@{/images/person.svg}" class="nav-title-icon">
                    发起人
                </h4>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-rounded"
                                 th:src="${blog.user.avatar_url}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">
                            <span th:text="${blog.user.name}" style="color: #999"></span>
                        </h5>
                    </div>
                </div>
            </div>
            <br>

            <!--相关问题-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>
                    <img th:src="@{/images/blog.svg}" class="nav-title-icon">
                    相关问题
                </h4>
<!--                <ul class="question-related">-->
<!--                    <li th:each="related: ${relatedQuestions}" class="question-related-li">-->
<!--                        <img src="/images/pencil.svg" style="width: 5%">-->
<!--                        <a th:href="@{'/question/' + ${related.id}}" th:text="${related.title}"></a>-->
<!--                    </li>-->
<!--                </ul>-->
            </div>

            <!--推荐内容-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>
                    <img th:src="@{/images/bookmark.svg}" class="nav-title-icon">
                    推荐内容
                </h4>
                <div>
                    <!--<img src="/images/coder.jpg" class="img-thumbnail">-->
                    <img class="index-gif" th:src="@{/images/mysql.gif}">
                </div>
                <br>
            </div>
        </div>
    </div>
</div>
<div th:replace="~{common/footer :: foot}"></div>
</body>
</html>